<!--  -->
<template>
  <el-table
    :data="attrTableData"
    @selection-change="selectionChange"
    border
    style="width: 100%"
  >
    <el-table-column align="center" type="selection"> </el-table-column>
    <el-table-column align="center" prop="id" label="编号"> </el-table-column>
    <el-table-column align="center" prop="name" label="属性名称" />
    <el-table-column align="center" label="商品类型">
      <template #default="{ row }">
        <div>{{ cname }}</div>
      </template>
    </el-table-column>
    <el-table-column align="center" label="属性是否可选">
      <template #default="{ row }">
        <div v-if="row.selectType == 0">唯一</div>
        <div v-if="row.selectType == 1">单选</div>
        <div v-if="row.selectType == 2">多选</div>
      </template>
    </el-table-column>
    <el-table-column align="center" label="属性值录入方式" width="180">
      <template #default="{ row }">
        <div v-if="row.inputType == 0">手工录入</div>
        <div v-if="row.inputType == 1">从列表中选取</div>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="" label="可选值列表" width="300" />
    <el-table-column align="center" prop="sort" label="排序" />
    <el-table-column align="center" prop="" label="操作">
      <template #default="{ row }">
        <div class="handle">
          <p><el-button size="small">编辑</el-button></p>
          <p>
            <el-button size="small" type="danger" @click="delAttrGoods(row.id)"
              >删除</el-button
            >
          </p>
        </div>
      </template>
    </el-table-column>
  </el-table>

  <!-- 下拉 -->
  <div class="goods-select">
    <el-select v-model="value" class="select" placeholder="Select" size="large">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button type="primary" size="large" @click="ensure">确定</el-button>
  </div>

  <!-- 分页  -->
  <div class="sorter">
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!-- 点击删除 -->
  <deleteProductAttr
    :showDelGoods="showDelGoods"
    @hidden="hiddenDel"
  ></deleteProductAttr>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import { useRoute } from "vue-router";
import * as http from "../../request/http";
import deleteProductAttr from "./components/productDel.vue";

const route = useRoute();
// 属性/参数列表
const attrTableData = ref([]);

// 路由传参 获取id type
let id = Number(route.query.id);
let type = Number(route.query.type);
let cname = route.query.name;
// console.log(type);

// 获取属性/参数列表
async function fetchAttrTableData(pageNum: number = 1, pageSize: number = 5) {
  //   console.log("删除", type);

  let res = await http.getAttrList(id, { pageNum, pageSize, type });
  // console.log(res);
  attrTableData.value = res.data.list;
  total.value = res.data.total;
}
fetchAttrTableData();

// 分页 组件
let currentPage = ref(1);
let pageSize = ref(5);
let total = ref(0);
// 条数
const handleSizeChange = (size: number) => {
  console.log(size);
  fetchAttrTableData(currentPage.value, size);
};
// 页码
const handleCurrentChange = (curPage: number) => {
  fetchAttrTableData(curPage, pageSize.value);
};

// 点击删除
let showDelGoods = ref(false);
let ids = ref(0);

function delAttrGoods(id: number) {
  // console.log("这是id", id);
  // console.log("这是del", delStatus);
  showDelGoods.value = true;
  ids.value = id;
}

// 子组件点击取消 隐藏删除弹框
async function hiddenDel(flag?: string) {
  showDelGoods.value = false;
  if (flag === "reloadDel") {
    let res = await http.updateDelAttribute({ ids: ids.value });
    // console.log("删除", res);
    if (res.code === 200) {
      fetchAttrTableData(currentPage.value, pageSize.value);
    }
  }
}

// 下拉框批量选择
const value = ref("批量操作");
const options = [
  {
    value: 1,
    label: "删除",
  },
];

// 点击确定
let arr: number[] = [];
function selectionChange(val: { id: number }[]) {
  //   console.log(val);
  val.forEach((item) => {
    // console.log(item.id);
    arr.push(item.id);
  });
  //   console.log(arr);
}

async function ensure() {
  //   let res = await http.updateDelAttribute({ ids: arr });
}
</script>
<style lang="less" scoped>
.sorter {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
.handle {
  display: flex;
  justify-content: center;
  :nth-child(1) {
    margin-right: 5px;
  }
}

.goods-select {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  .select {
    margin-right: 10px;
  }
}
</style>
